<template>
  <div class="dan">
    <div id="echarts" style="height: 100%;width: 100%"></div>
    <el-pagination
        small
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="allInfo.pageNum"
        :page-size="allInfo.pageSize"
        :total="allInfo.total">
    </el-pagination>
    <div style="width: 100%;border-bottom: 1px dashed #eaeaea"></div>
    <div style="margin-top: 20px">
      <el-button @click="drawer = true" type="warning" plain style="margin-left: 16px;float: right">
        记录宝宝信息
      </el-button>
    </div>
    <el-drawer
        title="记录宝宝数据"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <img src="../assets/e7ea694c309e8daa74b7e5e0afd4584c.jpeg" height="150px">
      <div style="width: 80%;margin-left: 15px">
        <el-form label-width="80px" style="padding: 50px">
          <el-form-item label="身高">
            <el-input v-model="formLabelAlign.height"></el-input>
          </el-form-item>
          <el-form-item label="体重">
            <el-input v-model="formLabelAlign.weight"></el-input>
          </el-form-item>
          <el-button style="float: right;" @click.prevent.native="upload">确认提交</el-button>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Charts",
  data() {
    return {
      texts: 111,
      page: {
        pageNum: 1,
        pageSize: 5
      },
      message: [],
      allInfo: {},
      drawer: false,
      direction: 'rtl',
      formLabelAlign: {
        height: "",
        weight: ""
      }
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    upload() {
      if (this.formLabelAlign.height == "" || this.formLabelAlign.weight == "") {
        this.$message.error("请输入完整信息")
        return
      }
      // //console.log(this.formLabelAlign)
      this.$http.post("/phy/insertPhy", this.formLabelAlign).then(data => {
        if (data.code == 200) {
          this.formLabelAlign = {
            height: "",
            weight: ""
          }
          this.$message.success("添加成功")
          this.getData()
          this.drawer = false
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {
          });
    },
    async getData() {
      await this.$http.post("/phy/pageSelectPhyData", this.page).then(data => {
        // //console.log(data)
        this.message = data.data.list
        this.allInfo = data.data
      })
      this.echarts()
    },
    // 监听页数变化
    handleSizeChange(pageSie) {
      this.page.pageSize = pageSie
      this.getData()
    },
    // 监听当前页变化
    handleCurrentChange(PageNum) {
      this.page.pageNum = PageNum
      this.getData()
    },
    echarts() {
      let data = this.message
      let timeArr = []
      let heightArr = []
      let weightArr = []
      for (let i = 0; i < data.length; i++) {
        timeArr.push(data[i].creatDate.split(" ")[0])
        heightArr.push(data[i].height)
        weightArr.push(data[i].weight)
      }
      // 基于准备好的dom，初始化echarts实例
      if (timeArr.length < 5) {
        switch (timeArr.length) {
          case 1:
            timeArr.push("")
            timeArr.push("")
            timeArr.push("")
            timeArr.push("")
            heightArr.push("")
            heightArr.push("")
            heightArr.push("")
            heightArr.push("")
            weightArr.push("")
            weightArr.push("")
            weightArr.push("")
            weightArr.push("")
            break
          case 2:
            timeArr.push("")
            timeArr.push("")
            timeArr.push("")
            heightArr.push("")
            heightArr.push("")
            heightArr.push("")
            weightArr.push("")
            weightArr.push("")
            weightArr.push("")
            break
          case 3:
            timeArr.push("")
            timeArr.push("")
            heightArr.push("")
            heightArr.push("")
            weightArr.push("")
            weightArr.push("")
            break
          case 4:
            timeArr.push("")
            heightArr.push("")
            weightArr.push("")
            break
        }
      }

      //有的话就获取已有echarts实例的DOM节点。
      let myChart = this.$echarts.getInstanceByDom(document.getElementById("echarts"))
      if (myChart == null) { // 如果不存在，就进行初始化
        myChart = this.$echarts.init(document.getElementById("echarts"));
      }
      let option = {
        title: {
          text: '儿童生理数据'
        },
        tooltip: {},
        xAxis: {
          data: timeArr
        },
        yAxis: {},
        legend: {
          data: [
            {
              name: '身高',
              icon: 'rect'
            },
            {
              name: '体重',
              icon: 'rect'
            }
          ]
        },
        series: [
          {
            name: '身高',
            type: 'bar',
            data: heightArr,
            itemStyle: {
              // 点的颜色。
              color: '#f5ebba'
            },
            // 高亮样式。
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: '#e8f5ba'
              }
            }
          },
          {
            name: '体重',
            type: 'bar',
            data: weightArr,
            itemStyle: {
              // 点的颜色。
              color: '#4dc9c9'
            },
            // 高亮样式。
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: '#80b6da'
              }
            }
          },
        ],
      };
      myChart.setOption(option);
    }

  }
}
</script>

<style scoped>

.dan {
  height: 320px;
}

</style>